<template>
<div class='reg'>
  <div class="reg_box">
   <!-- 头像区域 -->
            <div class="avatar_box">
                <img src="../../assets/logo.png" alt="">
            </div>
  <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <van-field
    v-model="repwd"
    type="password"
    name="确认密码"
    label="确认密码"
    placeholder="请再次输入密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">注册</van-button>
  </div>
</van-form>
<div class="link">
<router-link :to="{ name: 'Login'}">已有账号，我要登录</router-link>
</div>
  </div>
</div>
</template>

<script>
import {Notify} from "vant"
import {regApi} from "../../api/auth"
export default {
  name:"Reg",
data() {
return {
username:"",
password:"",
repwd:""
};
},
computed: {},
watch: {},
methods: {
 async onSubmit(){
    if(this.password===this.repwd){
  
      const result=await regApi({
        userName:this.username,
        password:this.password,
      })
      if(result.code==="success"){
        localStorage.setItem("token",result.token);
        this.$router.push({
          name:"Mine"
        })
      }else{
      Notify({
        type:"danger",
        message:result.message,
      })
    }
      console.log(result)
    }else{
      Notify({
        type:"danger",
        message:"两次密码输入不一致"
      })
    }
  }
},
created() {

},
mounted() {
 

},
beforeCreate() {}, 
beforeMount() {}, 
beforeUpdate() {},
updated() {}, 
beforeDestroy() {}, 
destroyed() {},
activated() {}, 
}
</script>
<style lang='scss' scoped>
.reg{
    background-color: #2b4b6b;
  
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .reg_box {
    width: 360px;
    // height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
   left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .avatar_box {
    height: 300px;
    width: 300px;
    border: 1px solid red;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -75%);
    background-color: #ff461f;
    /* 让图片的宽高占满整个父盒子 */
    img {
        width: 100%;
        height: 100%;
        background-color: #eee;
        border-radius: 50%;
    }
}
}
}
.link{
  width: 100%;
}
a{
  float: right;
  margin-right: 1.5rem;
  font-size: 0.8rem;
  color: blue;
}
</style>